import { Button, Card, message, Pagination, Table } from 'antd'
import React, { useEffect, useRef, useState } from 'react'
import { PoweroffOutlined, PlusOutlined } from '@ant-design/icons'
import './index.scss'
import projectApi, { recordsModel } from '@/api/project'
import { ColumnsType } from 'antd/lib/table'
import ModalTrade from './components/modalTrade'
export default function Trademark() {
  const modalTrade = useRef(null)
  // 品牌管理列表
  const [trademarkList, setTrademark] = useState<recordsModel[]>([])
  // 当前页
  const [current, setCurrent] = useState(0)
  // 每页数量
  const [pageSize, setPageSize] = useState(3)
  // 总数
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(false)
  // 控制模态框显示隐藏
  const [isModalOpen, setIsModalOpen] = useState(false)
  const trademarlInit = () => ({ id: 0, tmName: '', logoUrl: '' })
  const [trademark, setTrade] = useState<recordsModel>(trademarlInit())
  // 删除品牌
  const DeleteTrademark = (trademark: recordsModel) => {
    return async () => {
      try {
        await projectApi.deleteTrademark(trademark.id)
        message.success('删除成功')
      } catch (error) {
        message.error(error)
      } finally {
        reqTrademarkList()
      }
    }
  }
  useEffect(() => {
    reqTrademarkList()
  }, [current, pageSize])
  // 获取品牌列表
  const reqTrademarkList = async () => {
    try {
      setLoading(true)
      let result = await projectApi.reqTrademark(current, pageSize)
      setTrademark(result.records)
      setTotal(result.total)
    } catch (error) {
    } finally {
      setLoading(false)
    }
  }
  // table列属性
  const columns: ColumnsType<any> = [
    {
      title: '序号',
      render(text: any, record: any, index: number) {
        return index + 1
      }
    },
    {
      title: '品牌名称',
      dataIndex: 'tmName'
    },
    {
      title: '品牌LOGO',
      render(text: any, record: any, index: number) {
        return <img width={80} src={text.logoUrl}></img>
      }
    },
    {
      title: '操作',
      render(row) {
        return (
          <>
            <Button
              onClick={() => {
                setTrade(row)
                setIsModalOpen(true)
              }}
              style={{ marginRight: 10 }}
            >
              编辑
            </Button>
            <Button onClick={DeleteTrademark(row)} danger>
              删除
            </Button>
          </>
        )
      }
    }
  ]
  //添加品牌
  const addTrademark = () => {
    setTrade(trademarlInit())
    setIsModalOpen(true)
  }
  const modalIsShow = (show: boolean) => {
    setIsModalOpen(show)
  }
  // 分页器变化
  const onChange = (page: number, pageSize: number) => {
    setCurrent(page)
    setPageSize(pageSize)
  }
  return (
    <>
      <Card
        className="Card"
        title={
          <Button type="primary" onClick={addTrademark} icon={<PlusOutlined />}>
            添加
          </Button>
        }
      >
        <Table
          loading={loading}
          bordered
          dataSource={trademarkList}
          columns={columns}
          rowKey="id"
          pagination={false}
          style={{ marginBottom: 10 }}
        ></Table>
        <Pagination
          showQuickJumper
          current={current}
          defaultCurrent={current}
          defaultPageSize={pageSize}
          total={total}
          pageSizeOptions={['3', '5', '7']}
          onChange={onChange}
        />
      </Card>
      <ModalTrade
        isModalOpen={isModalOpen}
        modalIsShow={modalIsShow}
        trademark={trademark}
        reqTrademarkList={reqTrademarkList}
      ></ModalTrade>
    </>
  )
}
